<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=1024">
        <title>vue 指令 测试</title>
        <script src="/js/vue-1.0.3.js"></script>
    </head>
    <body>
        <div id="app">
            <input value="天假" type="button" @click="add" />
            <textarea style="width:200px;height:100px;" @keydown="txtKeyup($event)"></textarea
            <table>
                <tr>
                    <td>
                        <div style="border:1px solid red;" @click="qiehuan(key)" v-for="(key,val) in friend" >{{val.userName}}</div>
                    </td>
                    <td>
                        <div style="border:1px solid blue;" v-for="(index,item) in currList">{{index}}、{{item}}</div>
                    </td>
                </tr>
            </table>

            <div style="height:100px;overflow-y:auto;width:200px;border:1px solid red;" v-scroll="lists.length">
                <div v-for="item in lists">{{item}}<div>
            </div>
        </div>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    lists:[],
                    curr:'cyy',
                    index:2,
                    friend:{
                        'cyy':{
                            userName:'cyyinfo',
                            lists:[
                                "cyy-1",
                                "cyy-2",
                                "cyy-3",
                                "cyy-4",
                                "cyy-5",
                                "cyy-6"
                            ]
                        },
                        'cyy2':{
                            userName:'cyy2info',
                            lists:[]
                        }
                    }
                },
                computed:{
                    currList:function(){
                        console.log(this.curr+' ======');
                        var ll = this.friend[this.curr].lists;
                        console.log(ll);
                        console.log(ll.length);
                        return ll;

                    }
                },
                created:function(){
                    var friends = localStorage.getItem('friends');
                    console.log(friends);
                    if(friends){
                        var friendsJson = JSON.parse(friends);
                        for(var item in friendsJson){
                            this.$set('friend.'+item,friendsJson[item]);
                        }
                    }
                },
                methods:{
                    qiehuan:function(item){
                        console.log(item);
                        this.curr = item;
                    },
                    txtKeyup:function(key){
                        console.log(key.keyCode);
                    },
                    add:function(){
                        var msg = (this.lists.length+1)+"、sdlkfdslfsdjflsdfjldsfls";
                        this.lists.push(msg);
                        var index = this.index;
                        this.$set('friend.cyy3'+index,{
                            userName:'cyy3'+index,
                            lists:["cyy3-info"+index,"cyy3-info2"+index,"cyy3-info3"+index]
                        });
                        localStorage.setItem('friends',JSON.stringify(this.friend));
                        this.index ++;
                    }
                },
                directives:{
                    scroll:{
                        update:function(v,n){
                            this.el.scrollTop = this.el.scrollHeight;
                            console.log("指令执行了。");
                        }
                    }
                }
            });
        </script>
    </body>
</html>
